<script setup>
	const windowInfo = uni.getWindowInfo()
	// #ifdef MP
	const menuRect = uni.getMenuButtonBoundingClientRect()
	// #endif
	// #ifdef H5
	const menuRect = {width: 0}
	// #endif
	import {ref} from 'vue'
		
	const entryList = ref([
		{
			icon: "https://p0.ssl.qhimg.com/t01f222be1309c2fd7f.png",
			text: "全部产品"
		},
		{
			icon: "https://p4.ssl.qhimg.com/t01d7427e1f6239b1b1.png",
			text: "360搜索"
		},
		{
			icon: "https://p2.ssl.qhimg.com/t0199146ed535ecd65e.png",
			text: "360商城"
		},
		{
			icon: "https://p1.ssl.qhimg.com/t0192c6a682125e6cc9.png",
			text: "360游戏"
		}
	])
	
	const softwareList = ref([
		{
			icon:"https://p3.ssl.qhimg.com/t0128439c6143122bad.png",
			name: "手机卫士",
			size: 8.95,
			download: "手机卫士下载链接"
		},
		{
			icon:"https://p2.ssl.qhimg.com/t01fa9c1531e3294ca3.png",
			name: "手机助手",
			size: 27.75,
			download: "手机助手下载链接"
		},
		{
			icon:"https://p1.ssl.qhimg.com/t01d5f0eeb2cc0b0ecd.png",
			name: "浏览器",
			size: 3.8,
			download: "浏览器下载链接"
		},
		{
			icon:"https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png",
			name: "清理大师",
			size: 79.20,
			download: "清理大师下载链接"
		},
		{
			icon:"https://p3.ssl.qhimg.com/t01a555ce62565c3aa9.png",
			name: "极速浏览器",
			size: 5.8,
			download: "极速浏览器下载链接"
		},
		{
			icon:"https://p1.ssl.qhmsg.com/t01ac094f0e7138f4c1.png",
			name: "省电王",
			size: 54.00,
			download: "省电王下载链接"
		},
		{
			icon:"https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png",
			name: "免费WIFI",
			size: 2.8,
			download: "免费WIFI下载链接"
		},
		{
			icon:"https://p2.ssl.qhimg.com/t01cbde8755c0c23978.jpg",
			name: "安全客",
			size: 9.98,
			download: "安全客下载链接"
		}
	])
	
	const goToPage = (url) => {
		// uni.navigateTo({
		// 	url: url
		// })
		uni.navigateToMiniProgram({
			shortLink:'#小程序://完美校园/9zgz6H03JKTWHCE'
		})
	}
	
	const hardwareList = ref([
		{
			type: "hardware-item01",
			name: "360智能摄像机",
			desc: "有家有TA安心相伴",
			icon: "https://p0.ssl.qhimg.com/t014d0b0d86ea859959.png"
		},
		{
			type: "hardware-item02",
			name: "360家庭防火墙",
			desc: "急速上网 安全无忧",
			icon: "https://p3.ssl.qhimg.com/t0128f83364e8c9d4be.png"
		},
		{
			type: "hardware-item02",
			name: "360儿童手表",
			desc: "为爱守护 乐享生活",
			icon: "https://p0.ssl.qhimg.com/t010035192a7645472c.png"
		},
		{
			type: "hardware-item03",
			name: "360行车记录仪",
			desc: "安全驾驶 为您保驾护航",
			icon: "https://p3.ssl.qhimg.com/t01d3e53e82813eec78.png"
		},
		{
			type: "hardware-item03",
			name: "360扫地机器人",
			desc: "解放双手 乐享生活",
			icon: "https://p5.ssl.qhimg.com/t012fa14e716336e657.png"
		},
		{
			type: "hardware-item01",
			name: "360生态链",
			desc: "生态互联 牵手未来",
			icon: "https://p1.ssl.qhimg.com/t01a44368ac0c2055a4.png"
		}
	])
	
	const isShowTop = ref(false)
	const scrollTop = ref(0)
	const backTop = () =>{
		scrollTop.value = 0
	}
	
	let timerId = -1
	const onScroll = (event) => {
		clearTimeout(timerId)
		
		timerId = setTimeout(() => {
			scrollTop.value = event.detail.scrollTop
				
			if(scrollTop.value >= 200){
				isShowTop.value = true
			}else{
				isShowTop.value = false
			}
		},100)
	}
	
	const isShowMenu = ref(false)
	
</script>
<template>
	
	<!-- 导航栏 -->
	<view class="header" :style="{
		paddingTop: windowInfo.statusBarHeight+'px',
		paddingRight: menuRect.width + 10 + 'px',
		height: menuRect.height + 10 + 'px'
	}">
		<image class="header-logo" src="https://p2.ssl.qhimg.com/t01893213e448dbbfa2.png" mode="heightFix"></image>
		<image @click="isShowMenu = !isShowMenu" class="header-menu" src="https://p1.ssl.qhmsg.com/t010fa93a99715aad32.png" mode=""></image>
		
		
		<!-- 固定菜单 -->
		
		<view class="header-menu-list" :class="isShowMenu ? 'is-show-menu': ''">
			
		</view>
	</view>
	
	
	<scroll-view scroll-with-animation @scroll="onScroll" :scroll-top="scrollTop" scroll-y="true" class="scroll-body" :style="{height: `calc(100vh - ${menuRect.height + 10 + 'px'} - ${windowInfo.statusBarHeight + 'px'})`}">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-banner">
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="https://p2.ssl.qhimg.com/t011e7a7b3f6cc9bfdd.jpg" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		
		<!-- 产品分类 -->
		<view class="entry">
			<view v-for="item in entryList" :key="item.text" class="entry-item">
				<image class="entry-image" :src="item.icon" mode=""></image>
				<text class="entry-text">{{item.text}}</text>
			</view>
		</view>
		<!-- 分割区 -->
		<view class="split"></view>
		<!-- 手机软件 -->
		
		<view class="software">
			<text class="software-title">手机软件</text>
			<view class="software-list row wrap">
				<view v-for="item in softwareList" :key="item.name" class="software-item column">
					<image @click="goToPage()" class="software-image" :src="item.icon" mode=""></image>
					<text class="software-name marginTop">{{item.name}}</text>
					<text class="software-size marginTop">{{item.size}}M</text>
					<!-- #ifdef H5 -->
					<a class="software-download marginTop" :href="item.download">下载</a>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<navigator class="software-download marginTop" url="/pages/software/software">查看</navigator>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<navigator target="miniProgram" class="software-download marginTop" short-link="#小程序://完美校园/9zgz6H03JKTWHCE">查看</navigator>
					<!-- #endif -->
				</view>
			</view>
		</view>
		
		
		<view class="split"></view>
		
		<!-- 智能硬件 -->
		
		<view class="hardware">
			<view class="float-title">智能硬件</view>
			<view class="hardware-list">
				<view v-for="item in hardwareList" :key="item.name" :class="item.type">
					<text class="hardware-name">{{item.name}}</text>
					<text v-if="item.type !== 'hardware-item02'" class="hardware-desc">{{item.desc}}</text>
					<image class="hardware-image" :src="item.icon" mode="widthFix"></image>
					<text v-if="item.type === 'hardware-item02'" class="hardware-desc">{{item.desc}}</text>
				</view>
				<view class="hardware-item01">
					查看更多
				</view>
			</view>
		</view>
	</scroll-view>
	
	<image v-show="isShowTop" @click="backTop" class="back-top" src="/static/t0179ac3294ef926b8c.png" mode=""></image>
</template>

<style lang="scss">
	@import "../../uni.scss";
	.header {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
		/* #ifdef MP */
		height: 80rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 96rpx;
		/* #endif */
		
		background-color: $uni-color-primary;
		/* padding-top: 60rpx; */
		padding-left: 20rpx;
		.header-logo{
			width: 166rpx;
			height: 64rpx;
		}
		
		.header-menu {
			width: 42rpx;
			height: 32rpx;
		}
		
		.header-menu-list {
			position: absolute;
			opacity: 0;
			transition: all .4s;
			pointer-events: none;
			bottom: -328rpx;
			left: 0;
			width: 100%;
			height: 328rpx;
			background-color: rgba(0,0,0,.5);
			z-index: 1;
		}
		.is-show-menu {
			opacity: 1;
			pointer-events: auto;
		}
	}
	
	
	.scroll-body {
		
	}
	
	.swiper-banner,.swiper-image {
		width: 100%;
		height: 416rpx;
	}
	
	.entry {
		display: flex;
		height: 120rpx;
		padding-top: 60rpx;
		padding-bottom: 20rpx;
		.entry-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			border-right: 1rpx solid #ddd;
			align-items: center;
			.entry-image{
				width: 92rpx;
				height: 82rpx;
				margin-bottom: 10rpx;
			}
			
			.entry-text {
				font-size: 24rpx;
			}
		}
	}
	
	.software {
		margin-top: 50rpx;
		.software-title {
			font-size: 48rpx;
			color: #333;
			margin-left: 30rpx;
		}
		
		.software-item {
			width: 25%;
			align-items: center;
			margin: 40rpx 0 0 0;
			.software-image {
				width: 96rpx;
				height: 96rpx;
			}
				
			.software-name {
				font-size: 30rpx;
				color: #333;
			}
			
			.software-size {
				font-size: 30rpx;
				color: #cdcdcd;
			}
			.software-download {
				width: 100rpx;
				height: 50rpx;
				margin-bottom: 10rpx;
				border-radius: 25rpx;
				font-size: 30rpx;
				text-align: center;
				line-height: 50rpx;
				color: $uni-color-primary;
				background-color: #e2f2e2;
			}
		}
		
	}
	
	.float-title {
		font-size: 48rpx;
		color: #333;
		margin: 50rpx 0 50rpx 30rpx;
	}
	
	// .hardware-list {
	// 	width: 100%;
	// }
	
	.hardware-item01,
	.hardware-item02,
	.hardware-item03 {
		float: left;
		width: 50%;
		padding-top: 50rpx;
		padding-left: 30rpx;
		border-top: 1px solid #f60;
		box-sizing: border-box;
	}
	
	.hardware-item01 {
		height: 398rpx;
		
	}
	
	.hardware-name{
		display: block;
		font-size: 30rpx;
	}
	.hardware-desc {
		font-size: 26rpx;
		color: #ccc;
		margin-top: 10rpx;
	}
	
	.hardware-image {
		width: 270rpx;
		margin-top: 10rpx;
	}
	
	.hardware-item02 {
		height: 200rpx;
		.hardware-name{
			display: block;
			font-size: 30rpx;
		}
		.hardware-desc {
			font-size: 26rpx;
			color: #ccc;
			margin-top: 10rpx;
		}
		.hardware-image {
			float: right;
			width: 168rpx;
			height: 112rpx;
		}
	}
	
	.hardware-item03 {
		height: 350rpx;
	}
	
	.hardware-list {
		view:nth-child(1),
		view:nth-child(4),
		view:nth-child(6){
			border-right: 1rpx solid #f60;
		}
	}
	
	.back-top {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		background-color: $uni-color-primary;
		border-radius: 50%;
	}
	
</style>